<template>
	<view class="">
		<u-no-network  :image="img">
		</u-no-network>
		 <u-sticky bgColor="#fff">
		    <u-tabs
		       :list="list4"
		       lineWidth="30"
		               lineColor="#f56c6c"
		               :activeStyle="{
		                   color: '#303133',
		                   fontWeight: 'bold',
		                   transform: 'scale(1.05)'
		               }"
		               :inactiveStyle="{
		                   color: '#606266',
		                   transform: 'scale(1)'
		               }"
		               itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
		    			@change="changeTabs"
		    			:scrollable="false"
		       >
		       </u-tabs>
		  </u-sticky>
		 
			<!-- <u-subsection mode="subsection" :list="list4" :current="active" @change="changeTabs"></u-subsection> -->
			<view class="" @click="sCalender">
				<u-text :text="startDate"></u-text>~<u-text :text="endDate"></u-text>
			</view>
			<u-calendar :show="showCalender" :mode="'range'" @confirm="confirm"></u-calendar>
			<view class="contain">
				<tempalte v-if="active==0" >
					<bar :propId="active" />
				</tempalte>
				<tempalte v-if="active==1"  >
					<pie :propId="active"/>
				</tempalte>
				<tempalte v-if="active==2">
					<mix :propId="active" :style="showCanas?'display:block':'display:none'" />
				</tempalte>
			</view>
	</view>
</template>

<script>
	import bar from '@/components/bar.vue';
	
	import mix from '@/components/mix.vue';
	
	import pie from '@/components/pie.vue';
	export default{
		components:{
			bar,
			mix,
			pie
		},
		data(){
			let one = new Date().getFullYear()+"-"+"01"+"-"+"01";
			let e = new Date();
			    e = uni.$u.timeFormat(e, 'yyyy-mm-dd');
			return {
				active:0,
				showCalender:false,
				startDate:one,
				endDate:e,
				showCanas:true,
				 list4: [{
				                    name: '关注'
				                }, {
				                    name: '推荐',
				                    badge: {
				                        isDot: true
				                    }
				                }, {
				                    name: '电影',
				                }, {
				                    name: '科技'
				                }],
								img:'https://cdn.uviewui.com/uview/swiper/swiper3.png'
			}
		
		},
		methods:{
			sCalender(){
				this.showCalender=true;
				this.showCanas = false;
			},
			confirm(e) {
							console.log(e);
							this.startDate=e[0];
							
							this.endDate=e[e.length-1];
							this.showCalender=false;
							this.showCanas = true;
						},
			changeTabs(i){
				console.log(i);
				// this.active =i;
				this.active =i.index;
			}
		}
	}
</script>

<style>
</style>